/** @format */

import React, {useState, useEffect} from 'react';
import {blog} from './index.styl';
import {user} from '@/api/user';
import {formateTime, getBrowserType} from '@/util';
import MarkdownIt from 'markdown-it';
import {store} from '@/store';
import {useRouter} from 'next/router';
import Link from 'next/link';
import AlipayQRCode from '@/assets/imgs/Alipay.png';
import WechatpayQRCode from '@/assets/imgs/wechatpay.png';

interface IArticle {
  id: number;
  title: string;
  category: string;
  markdown: string;
  release_date: string;
  visits: number;
  audioSrc?: string;
}

interface IQuery {
  id: string;
  [props: string]: any;
}

interface IProps {
  broswerType: string
}

const SupportJsx = (props: IProps) => {
  const [isShowQRCode,setisShowQRCode] = useState(false);
  const wakeupAlipay = (amount: number) => {
    location.href = `alipays://platformapi/startapp?appId=20000123&actionType=scan&biz_data={"s":"money","u":"2088012336089060","a":"${amount}","m":"谢谢支持"}`;
  };

  const suportJsxMap = {
    'MobileBrowser':(
      <p className={'reward'}>
        支持一下
        <span
          onClick={() => {
            wakeupAlipay(1);
          }}>
          一元
        </span>
        <span
          onClick={() => {
            wakeupAlipay(3);
          }}>
          三元
        </span>
      </p>
    ),
    'PCBrowser':(
      <div className={'reward'}>
        <p onMouseOver={()=>{setisShowQRCode(true)}} onMouseOut={()=>{setisShowQRCode(false)}}>支持一下</p>
        <div className={`qrcode-wrap ${isShowQRCode ? '' : 'hide'}`}>
        <img src={AlipayQRCode} />
        <img src={WechatpayQRCode} />
        </div>
      </div>
    )
  };

  return  suportJsxMap[props.broswerType] || '';
}

const Blog = () => {
  const router = useRouter();
  const postID: number = parseInt((router.query as IQuery).id);
  const [data, setData] = useState({
    title: '',
    id: '',
    category: '',
    markdown: '',
    release_date: '',
    visits: '',
    audioSrc: '',
  });
  //
  const [broswerType, setBroswerType] = useState('')

  useEffect(() => {
    const getArticle = async () => {
      const [err, articleData]: any = (await user.getArticle({id: postID})) as IArticle;
      if (err) {
        return;
      }
      // 代码格式插件要求变量名必须要用驼峰命名
      articleData['release_date'] = formateTime(articleData['release_date'], 'YYYY-MM-DD');
      // 更新标题、audio
      store.dispatch({type: 'blogTitle', val: articleData.title});
      articleData[`audio_src`]
        ? store.dispatch({type: 'audioSrc', val: articleData[`audio_src`]}) &&
          (articleData.audioSrc = articleData[`audio_src`])
        : '';
      setData(articleData);
    };

    if (postID) {
      getArticle();
      console.log(getBrowserType());
      setBroswerType(getBrowserType());
    }

    return () => {
      store.dispatch({type: 'audioSrc', val: ''});
    };
  }, [postID]);

  return (
    <div className={`${blog}`}>
      <header>
        <h1>{data.title}</h1>
      </header>
      <hr />
      <article
        className={'markdown-body'}
        dangerouslySetInnerHTML={{__html: new MarkdownIt({html: true, breaks: true}).render(data.markdown)}}
      />
      <div className="post-meta">
        <hr />
        <Link href={`/category/${data.category}`}>
          <a className={'category'}>{data.category}</a>
        </Link>
        <br />
        <time>{data.release_date}</time>
        <SupportJsx broswerType={broswerType} />
      </div>
    </div>
  );
};

export default Blog;
